<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>退货商品</span>
        <el-button style="float: right;" size="mini" @click="fanhui()">返回</el-button>
      </div>
      <div>
        <el-table :data="goodsListData" border style="width: 100%; margin-top: 10px;">
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.image" style="width: 100px;height: 100px;" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="280">
            <template slot-scope="scope">
              <a v-for="(a, b) in scope.row.name.split(' ')" :key="a">
                <p v-if="b == 0">{{ a }}</p>
              </a>
              <br />品牌:
              <span>{{ scope.row.brand_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格/货号">
            <template slot-scope="scope">
              价格:￥
              <span>{{ (scope.row.price/100).toFixed(2) }}</span>
              <br />货号:NO.00000
              <span>{{ scope.row.sn }}</span>
            </template>
          </el-table-column>
          <el-table-column label="属性">
            <template slot-scope="scope">
              <span>{{scope.row.spec}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="数量"></el-table-column>
          <el-table-column property="kucun" label="库存"></el-table-column>
          <el-table-column prop="money" label="小计">
            <template slot-scope="scope">
              ￥
              <span>{{ (scope.row.money/100).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right;margin-right: 20px;margin-top: 20px;margin-bottom: 20px;">
          <span>
            合计:
            <b style="color: red;">￥{{ (OrderInfo.totalMoney/100).toFixed(2) }}</b>
          </span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>服务单信息</span>
      </div>
      <div>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">服务单号</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.id}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">申请状态</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span v-if="returnOrder.status==='0'">已申请</span>
              <span v-if="returnOrder.status==='1'">已完成</span>
              <span v-if="returnOrder.status==='2'">已拒绝</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">订单编号</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{OrderInfo.id}}</span>&nbsp;
              <a href="script:void(0)" @click="ddxianqin(order.id)">查看</a>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">申请时间</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.applyTime}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">用户账号</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.userAccount}}</span>
            </div>
          </el-col>
        </el-row>
        <br />
        <br />
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">订单金额</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <a>¥{{(OrderInfo.payMoney/100).toFixed(2)}}</a>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">退运费</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <el-radio-group v-if="returnOrder.status==='0'" v-model="returnOrder.isReturnFreight">
                <el-radio label="0">不退运费</el-radio>
                <el-radio label="1">退运费</el-radio>
              </el-radio-group>
              <span v-else>
                <span v-if="returnOrder.isReturnFreight==='0'">不退运费</span>
                <span v-if="returnOrder.isReturnFreight==='1'">退运费</span>
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">确认退款金额</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <el-input
                v-if="returnOrder.status==='0'"
                style="width:200px"
                v-model.number="returnMoney"
              >
                <a slot="prefix">￥</a>
              </el-input>
              <span v-else>
                <a>￥{{(returnOrder.returnMoney/100).toFixed(2)}}</a>
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">退款原因</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span v-if="returnOrder.returnCause===0">取消订单</span>
              <span>{{returnCause}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">问题描述</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.description}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div
              style="height: 100px;background-color: #f3f6fc;line-height: 100px;font-size: 13px;text-align: center !important;border: 1px solid rgb(235, 238, 245);"
            >凭证照片</div>
          </el-col>
          <el-col :span="18">
            <div style="height: 100px;border: 1px solid rgb(235, 238, 245)">
              <div
                style="width:100px;height: 100px;float: left;"
                v-for="item in images"
                :key="item"
              >
                <el-image style="width: 98px; height: 98px" :src="item" :preview-src-list="images"></el-image>
                <!-- <img :src="item" style="width:98px;height: 98px;" /> -->
              </div>
            </div>
          </el-col>
        </el-row>
        <br />
        <br />
        <el-row v-if="returnOrder.status==='1' || returnOrder.status==='2'">
          <el-col :span="5">
            <div class="biaotidiv">处理人员</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span v-if="returnOrder.adminId===null">Admin</span>
              <span>{{returnOrder.adminId}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="returnOrder.status==='1' || returnOrder.status==='2'">
          <el-col :span="5">
            <div class="biaotidiv">处理时间</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.disposeTime}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">操作备注</div>
          </el-col>
          <el-col :span="18" v-if="returnOrder.status==='0'">
            <div class="neirondiv">
              <el-input v-model="returnOrder.remark" style="width: 500px"></el-input>
            </div>
          </el-col>
          <el-col :span="18" v-else>
            <div class="neirondiv">
              <span>{{returnOrder.remark}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;" :gutter="40" v-if="returnOrder.status==='0'">
          <el-col :span="12">
            <div>
              <el-button style="float: right;" type="danger" @click="jujuetuih()">拒绝退货</el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-button style="float: left;" type="primary" @click="querentuih()">确认退货</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      goodsListData: [],
      OrderInfo: {},
      returnId: '',
      returnOrder: {},
      returnCause: '',
      images: [],
      returnMoney: 0

    };
  },
  created () {
    // 取到路由带过来的参数
    this.returnId = this.$route.query.id;
    this.getReturnOrder()
    this.getGoodsList()
  },
  methods: {
    async getReturnOrder () {
      const { data: res } = await this.$http.get(
        `vi/order/return/order/queryByReturnId/${this.returnId}`
      );
      this.returnOrder = res.data.tbReturnOrder
      this.returnMoney = res.data.tbReturnOrder.returnMoney
      this.returnMoney = (this.returnMoney / 100).toFixed(2)
      this.OrderInfo = res.data.order
      this.images = this.returnOrder.evidence.split(',')
      if (this.returnOrder.returnCause != 0) {
        const { data: resp } = await this.$http.get(
          `vi/order/return/cause/detail/${this.returnOrder.returnCause}`
        );
        this.returnCause = resp.data.tbReturnCause.cause
      }
    },
    async getGoodsList () {
      // 获取订单中的商品信息
      const { data: resp } = await this.$http.get(
        `vi/order/order/item/queryByOrderIdGoods/${this.OrderInfo.id}`
      );
      this.goodsListData = resp.data.TbOrderItems;
    },
    // 订单详情
    ddxianqin (id) {
      this.$router.push({
        query: {
          id: id
        },
        path: "/home/order/orderDetails"
      });
    },
    // 返回
    fanhui () {
      this.$router.push("/home/returnGoods");
    },
    // 拒绝退货
    async jujuetuih () {
      this.returnOrder.status = '2'
      const { data: res } = await this.$http.put(
        `vi/order/return/order/update`,
        this.returnOrder
      );
      // 提示信息
      this.$message({
        type: "info",
        message: "已拒绝"
      });
      this.$router.push("/home/returnManey");
    },
    // 确认退货
    async querentuih () {
      this.returnOrder.status = '1'
      this.returnOrder.returnMoney = this.returnMoney * 100
      const { data: res } = await this.$http.put(
        `vi/order/return/order/update`,
        this.returnOrder
      );

      // 提示信息
      this.$message({
        type: "success",
        message: "操作成功"
      });
      this.getReturnOrder()
    }

  }
};
</script>
<style scoped>
.biaotidiv {
  height: 50px;
  background-color: #f3f6fc;
  text-align: center !important;
  border: 1px solid rgb(235, 238, 245);
  line-height: 50px;
  font-size: 13px;
}
.neirondiv {
  height: 50px;
  border: 1px solid rgb(235, 238, 245);
  line-height: 50px;
  font-size: 13px;
  padding-left: 10px;
}
</style>